<template>
  <div class="channel-edit">
    <!-- 我的频道 -->
    <van-cell :border="false">
      <div slot="title"
           class="title-text">我的频道</div>
      <van-button class="edit-btn"
                  type="danger"
                  plain
                  round
                  @click="isChannelEdit=!isChannelEdit"
                  size="mini">{{isChannelEdit ? '完成':'编辑'}}</van-button>
    </van-cell>
    <van-grid class="my-grid"
              :gutter="10">
      <van-grid-item v-for="(item,index) in userChannels"
                     @click="clickChannel(index,item)"
                     :key="index"
                     class="grid-item">
        <van-icon v-if="isChannelEdit && item.name!=='推荐'"
                  slot="icon"
                  name="clear"></van-icon>
        <span class="text"
              :class="{active:activeIndex===index}"
              slot="text">{{item.name}}</span>
      </van-grid-item>
    </van-grid>
    <!-- 频道推荐 -->
    <van-cell :border="false">
      <div slot="title"
           class="title-text">频道推荐</div>
    </van-cell>
    <van-grid class="recommend-grid"
              :gutter="10">
      <van-grid-item v-for="(item,index) in recommendChannels"
                     @click="addChannel(item)"
                     :key="index"
                     class="grid-item"
                     icon="plus"
                     :text="item.name" />
    </van-grid>
    <!-- /频道推荐 -->

  </div>
</template>
<script>
import { getAllChannels,addUserChannel,deleteUserChannel } from '@/api/channel'
import { mapGetters } from 'vuex'
import { setItem } from '@/utils/storage'
 export default {
    name:'ChannelEdit',
    data() {
      return {
        allChannels: [],  // 全部频道数据
        isChannelEdit:false  // 是否处于编辑状态
      }
    },
    computed: {
      ...mapGetters(['haslogin']),
      recommendChannels(){
        // 推荐频道 =  全部频道  - 我的频道
        // 实现： 遍历全部频道数据，取出每个判断是否在我的频道中，如果不在就是推荐频道的数据
        // const list = []
        // this.allChannels.forEach(val=>{
        //   // val全部频道里面每个数据
        //   // channel 是我的频道里面每个数据
        //   let idx = this.userChannels.findIndex(channel=>channel.id===val.id)
        //   if(idx===-1){ // 没有找到，也就是不在我的频道中
        //     list.push(val)
        //   }
        // })
        // return list
        // 数组的filter返回过滤出的元素，return后面接条件
        return this.allChannels.filter(val=>{
          return  this.userChannels.findIndex(channel=>channel.id===val.id) === -1
        })
        // filter map find findIndex some every  全部都要有return
      }
    },
    props:{
      // 接收外部传入的我的频道数据
      userChannels:{
        type:Array,
        require:true
      },
      // 接收激活下标
      activeIndex:{
        type:Number,
        require:true
      }
    },
    created(){
      this.loadAllChannels()
    },
    methods: {
      // 加载所有频道数据
      async loadAllChannels() {
          try {
            let {data:res} = await getAllChannels()
            this.allChannels = res.data.channels
          } catch (error) {
            console.dir(error);
            this.$toast.fail('获取全部频道失败')
          }
      },
      // 推荐频道到我的频道
      async addChannel(val){
        this.userChannels.push(val)  // 可以，没有修改userChannels，还是原来的那个引用地址
        // this.userChannels = []  // 赋值修改，不可以！违背了单项数据流！
        // 父子通信如果props是一个引用数据类型，组件内部直接操作这个数据即可（主要不要赋值）
        
        try {
          // 持久化操作
          if(this.haslogin){
            // 登录了，保存线上
            await addUserChannel([{
              id:val.id, // 频道id
              seq: this.userChannels.length
            }])
          }else{
            // 没登录，保存本地
            setItem('TOUTIAO_CHANNEL',this.userChannels)
          }
        } catch (error) {
          this.$toast.fail('保存失败')
        }
      },
      // 我的频道点击
      clickChannel(idx,val){
        // 编辑状态，就删除；不是编辑状态就跳转
        if(this.isChannelEdit){
          // 删除操作
          if(val.name === '推荐') return
          // 删除对应下标对应的元素
          this.userChannels.splice(idx,1)
          // 激活位置以及左边的内容点击，需要将激活下标-1
          idx<= this.activeIndex && this.$emit('update-index',this.activeIndex-1)
          // 持久化操作
          this.delChannelSave(val.id)
        }else{
          // 关闭/跳转操作，跳转对应tab
          this.$emit('close')
          this.$emit('update-index',idx)
        }
      },
      // 删除持久化操作
      async delChannelSave(id){
        try {
          // 判断是否登录
          if(this.haslogin){
            // 登录了，发送请求后台
            await deleteUserChannel(id)
          }else{
            // 未登录，保存本地
            setItem('TOUTIAO_CHANNEL',this.userChannels)
          }
        } catch (error) {
           this.$toast.fail('删除失败')
        }
      }

    },
  }
</script>

<style scoped lang="less">
.channel-edit {
  padding: 85px 0;

  .title-text {
    font-size: 32px;
    color: #333333;
  }

  .edit-btn {
    width: 104px;
    height: 48px;
    font-size: 26px;
    color: #f85959;
    border: 1px solid #f85959;
  }

  /deep/ .grid-item {
    width: 160px;
    height: 86px;
    .van-grid-item__content {
      white-space: nowrap;
      background-color: #f4f5f6;
      .van-grid-item__text, .text {
        font-size: 28px;
        color: #222;
        margin-top: 0;
      }
      .active {
        color: red;
      }
      .van-grid-item__icon-wrapper {
        position: unset;
      }
    }
  }

  /deep/ .my-grid {
    .grid-item {
      .van-icon-clear {
        position: absolute;
        right: -10px;
        top: -10px;
        font-size: 30px;
        color: #cacaca;
        z-index: 2;
      }
    }
  }

  /deep/ .recommend-grid {
    .grid-item {
      .van-grid-item__content {
        flex-direction: row;
        .van-icon-plus {
          font-size: 28px;
          margin-right: 6px;
        }
      }
    }
  }
}
</style>